<template>
	<view>
		<uni-nav-bar fixed @clickLeft="goorder" statusBar="true" left-icon="back" title="订单详情"></uni-nav-bar>
		<!-- 带取餐 -->
		<view class="block_1" v-if="orderinfo.status == '待取餐'">
			<view class="top">
				<image src="/static/zhong.png" mode=""></image>
				<view class="">
					待取餐
				</view>
			</view>
			<view class="imgpre">
				<image src="/static/ju.png" mode=""></image>
				<view class="textpoa">
					<view class="t1">
						取餐码
					</view>
					<view class="t2">
						{{orderinfo.takeCode}}
					</view>
					<view class="t3">
						与客户确认取餐码后取餐
					</view>
				</view>
			</view>
			<countdown :time="orderinfo.takeTimeEnd"></countdown>
		</view>
		<view class="block_2" v-if="orderinfo.status == '已退款'">
			<view class="">
				<image src="/static/orderi1.png" mode=""></image>
				<view class="t1">退款成功</view>
			</view>
			<view class="its">
				<view class="its_l">合计</view>
				<view class="price3"><span>￥</span>{{orderinfo.orderAmount}}</view>
			</view>
		</view>
		<view class="block_3" v-if="orderinfo.status!='待取餐' && orderinfo.status!= '已退款'">
			<!-- // 1待取餐 2退款成功 3 订单取消 4 订单完成 5待评价 6 已失效 -->
			<view class="">
				<image v-if="
				orderinfo.status== '已取消'||
				orderinfo.status== '已完成'||
				orderinfo.status== '待评价'" src="/static/dui.png" mode=""></image>
				<image v-if="orderinfo.status== '已失效'" src="/static/shi.png" mode=""></image>
				<view class="t1">
					<span v-if="orderinfo.status== '已取消'">已取消</span>
					<span v-if="orderinfo.status== '已完成'">已完成</span>
					<span v-if="orderinfo.status== '待评价'">待评价</span>
					<span v-if="orderinfo.status== '已失效'">已失效</span>
				</view>
				<view class="t2">
					<span v-if="orderinfo.status== '已取消'">
						取消原因：啊实打实大萨达
					</span>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="iconflex">
				<view class="left">
					{{orderinfo.shopName}}-{{orderinfo.productName}}
				</view>
			</view>
			<view class="">
				<view class="its">
					<view class="its_l">用户昵称</view>
					<view class="its_l">{{orderinfo.createUserName}}</view>
				</view>
				<view class="its">
					<view class="its_l">商品种类</view>
					<view class="its_l">{{orderinfo.productCategory}}</view>
				</view>
				<view class="its">
					<view class="its_l">商品数量</view>
					<view class="its_l">{{orderinfo.productCount}}</view>
				</view>
				<view class="its">
					<view class="its_l">商品价格</view>
					<view class="price1"><span
							class="S1">￥{{orderinfo.productPriceOldBegin}}-{{orderinfo.productPriceOldEnd}}</span>
						￥{{orderinfo.productPrice}}</view>
				</view>
				<view class="border">
					<view class="its">
						<view class="its_l">消费券</view>
						<view class="price2">
							<span v-if="orderinfo.couponReceiveId">-￥{{orderinfo.couponAmount}}</span>
							<span v-else>无</span>
						</view>
					</view>
					<view class="its">
						<view class="its_l">合计</view>
						<view class="price3"><span>￥</span>{{orderinfo.orderAmount}}</view>
					</view>
				</view>
				<view class="its">
					<view class="its_l">订单编号</view>
					<view class="its_l flex_b">{{orderinfo.orderNumber}}
						<span class="btn" @click="copy">复制</span>
					</view>
				</view>
				<view class="its">
					<view class="its_l">支付方式</view>
					<view class="its_l">{{orderinfo.payType}}</view>
				</view>
				<view class="its">
					<view class="its_l">下单时间</view>
					<view class="its_l">{{orderinfo.createTime}}</view>
				</view>
				<view class="its">
					<view class="its_l">支付时间</view>
					<view class="its_l">{{orderinfo.payTime}}</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 200rpx;"></view>
		<view class="footerbtn" v-if="orderinfo.status == '待取餐'">
			<view class="cont">
				<view class="btn b2" @click="opentss">
					取消订单
				</view>
				<view class="btn b1" @click="hx">
					核销订单
				</view>
			</view>
		</view>
		<uni-popup ref="popuphx" type="center">
			<view class="popuphx">
				<view class="tit">核销订单</view>
				<view class="cont">请确认要对 {{orderinfo.productName}} 进行核销吗？</view>
				<view class="btnflex">
					<view class="btn b1" @click="close">
						取消
					</view>
					<view class="btn b2" @click="handleconfirm">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="tit">
					请选择取消订单原因
				</view>
				<scroll-view scroll-y="true" class="sc">
					<radio-group @change="radioChange">
						<label class="uni-list-cell" v-for="(item, index) in yylist" :key="item.value">
							<view>
								<radio style="transform: scale(0.8);" color="#000" :value="item.value"
									:checked="index === current" />
							</view>
							<view style="font-size: 32rpx;">{{item.dictLabel}}</view>
						</label>
					</radio-group>
				</scroll-view>
				<view class="btn" @click="handleTj">
					提交
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		ordersInfo,
		ordersTake,
		getdict,ordersRefund
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				// 1待取餐 2已退款  3 已取消 4已完成 5待评价 6已失效
				isstep: 1,
				yylist: [],
				orderinfo: {},
				
				params:{
					id:"",
					refundReason:''
				}
			};
		},
		onLoad(option) {
			this.params.id = option.id
			ordersInfo({
				id: option.id
			}).then(res => {
				res.data.productCategory = res.data.productCategory.split(',')
				this.orderinfo = res.data
			})
			getdict('self_order_cancel_reason_merchant').then(res => {
				this.yylist = res.data.map(item=>{
					return {
						value:item.dictValue,
						dictLabel:item.dictLabel,
					}
				})
			})
		},
		methods: {
			copy() {
				uni.setClipboardData({
					data: this.orderinfo.orderNumber,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						})
					}
				})
			},
			close() {
				this.$refs.popuphx.close()
				this.$refs.popup.close()
			},
			hx() {
				this.$refs.popuphx.open()
			},
			handleconfirm() {
				ordersTake({
					id: this.orderinfo.id
				}).then(res => {
					if (res.code == 200) {
						this.$refs.popuphx.close()
						uni.showToast({
							title: '成功核销',
							icon: 'none'
						})
						ordersInfo({
							id: this.orderinfo.id
						}).then(res => {
							res.data.productCategory = res.data.productCategory.split(',')
							this.orderinfo = res.data
						})
					}
				})
			},
			opentss() {
				this.$refs.popup.open()
			},
			radioChange(e) {
				this.params.refundReason = e.detail.value
			},
			handleTj(){
				ordersRefund(this.params).then(res=>{
					if (res.code == 200) {
						this.$refs.popup.close()
						uni.showToast({
							title: '订单已取消',
							icon: 'none'
						})
						ordersInfo({
							id: this.orderinfo.id
						}).then(res => {
							res.data.productCategory = res.data.productCategory.split(',')
							this.orderinfo = res.data
						})
					}
				})
			},
			goorder() {
				uni.switchTab({
					url: '/pages/order/order'
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #FBFBFB;
	}

	.block_1 {
		padding: 18rpx 20rpx;
		box-sizing: border-box;
		background: #fff;

		.top {
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 52rpx;
			color: #000000;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 10rpx;
			}



		}

		.imgpre {
			position: relative;
			margin: 40rpx auto;
			width: 416rpx;
			height: 251rpx;

			image {
				width: 416rpx;
				height: 251rpx;
			}

			.textpoa {
				text-align: center;
				position: absolute;
				width: 416rpx;
				height: 251rpx;
				padding: 24rpx;
				box-sizing: border-box;
				top: 0%;

				.t1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
				}

				.t2 {
					font-family: 'DINB';
					font-size: 80rpx;
					color: #000000;
				}

				.t3 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #23633D;
					line-height: 33rpx;
					margin-top: 40rpx;
				}
			}
		}

		.flex1 {
			display: flex;
			align-items: center;
			height: 68rpx;
			background: #F3F3F3;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			justify-content: space-between;
			padding: 0rpx 20rpx;
			box-sizing: border-box;
			width: 710rpx;
			margin: 0 auto;

			image {
				width: 32rpx;
				height: 33rpx;
			}
		}
	}

	.block_2 {
		font-family: PingFang SC, PingFang SC;
		text-align: center;
		background: #fff;

		image {
			width: 142rpx;
			height: 96rpx;
			margin-top: 46rpx;
		}

		.t1 {
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			margin: 24rpx auto;
		}

		.t2 {
			font-weight: 500;
			font-size: 28rpx;
			color: #CE7034;
			margin-bottom: 20rpx;
		}

		.its {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #eee;
			padding: 30rpx 20rpx;
			border-top: 1px solid #eee;

			.its_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.price3 {
				font-family: 'DINB';
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;

				span {
					font-size: 28rpx;
				}
			}
		}
	}


	.block_3 {
		font-family: PingFang SC, PingFang SC;
		text-align: center;
		background: #fff;

		image {
			width: 108rpx;
			height: 108rpx;
			margin-top: 46rpx;
		}

		.t1 {
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			margin: 24rpx auto;
		}

		.t2 {
			font-weight: 500;
			font-size: 28rpx;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
		}
	}

	.content {
		background: #fff;
		padding: 32rpx 20rpx;
		box-sizing: border-box;

		.iconflex {
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 32rpx;
				height: 33rpx;
			}

			.left {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #000000;
				display: flex;
				align-items: center;

				image {
					margin-right: 6rpx;
				}
			}

			.right {
				image {
					margin-left: 30rpx;
				}
			}
		}

		.its {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx auto;

			.its_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.price1 {
				font-family: 'DINB';
				font-size: 28rpx;
				color: #000000;

				.S1 {
					font-family: 'FINE';
				}

				span {
					font-weight: 400;
					font-size: 24rpx;
					color: #D1CDCD;
					text-decoration: line-through;
					margin-right: 6rpx;
				}
			}

			.price2 {
				font-family: 'DINB';
				font-size: 28rpx;
				color: #CE7034;
			}

			.price3 {
				font-family: 'DINB';
				font-size: 40rpx;
				color: #000000;

				span {
					font-size: 28rpx;
				}
			}

			.btn {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #FFFFFF;
				height: 32rpx;
				background: #29A85C;
				text-align: center;
				line-height: 32rpx;
				padding: 0rpx 10rpx;
				margin-left: 10rpx;
			}
		}



		.border {
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
		}
	}


	.footerbtn {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		border-top: 1px solid #eee;
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.cont {
			display: flex;
			padding: 10rpx 20rpx;
			height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			align-items: center;
			// flex-direction: row-reverse;
			justify-content: space-between;

			.btn {
				width: 460rpx;
				height: 92rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 92rpx;
				text-align: center;
			}

			.b1 {
				background: #000;
				color: #fff;
			}

			.b2 {
				width: 200rpx;
				color: #D9D9D9;
				border: 2rpx solid #D9D9D9;
			}
		}
	}

	.popup {
		width: 630rpx;
		height: 850rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 42rpx 40rpx;
		box-sizing: border-box;

		.tit {
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
			margin-bottom: 30rpx;
		}

		.uni-list-cell {
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			margin-bottom: 30rpx;
		}

		.sc {
			height: 560rpx;
		}

		.btn {
			width: 240rpx;
			height: 92rpx;
			background: #000000;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 92rpx;
			margin: 50rpx auto 0rpx;
		}
	}
</style>